{include file="public/header,public/nav,public/fixbar" title="我的收益-<?php echo request()->pc_info['seo_title']?>"/}
<div class="layui-body">
    <div class="layui-container">
        <div class="layui-col-space15">
            <!-- 菜单栏 -->
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4 layui-col-lg3">
                <div class="layui-main user-main min-height-90vh">
                    {include file="user/menu"/}
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm8 layui-col-md8 layui-col-lg9">
                <div class="layui-main user-main min-height-90vh">
                    <h2>我的收益</h2>
                    <blockquote class="layui-elem-quote">
                        <div class="space-between">
                            <p class="layui-font-success">
                                <span class="layui-font-black">可提现收益：</span>
                                <b class="layui-font-30" style="font-family: DIN;">{$info.distribution}</b>
                                <span class="layui-font-12">元</span>
                            </p>
                            <a class="layui-btn layui-bg-success layui-btn-sm cash-out">申请提现</a>
                        </div>
                        <hr/>
                        <div class="space-between">
                            <div>
                                <p>累计收益</p>
                                <p>
                                    <b class="layui-font-18">{$info.total_distribution}</b>
                                    <span class="layui-font-12">元</span>
                                </p>
                            </div>
                            <div>
                                <p>已提现</p>
                                <p>
                                    <b class="layui-font-18">{$info.withdrawn_amount}</b>
                                    <span class="layui-font-12">元</span>
                                </p>
                            </div>
                            <div>
                                <p>待审核</p>
                                <p>
                                    <b class="layui-font-18">{$info.frozen_distribution}</b>
                                    <span class="layui-font-12">元</span>
                                </p>
                            </div>
                        </div>
                    </blockquote>
                    <div class="layui-tab layui-tab-brief padding-bottom-10">
                        <ul class="layui-tab-title">
                            <li class="layui-this select-type" data-type="1">收益明细</li>
                            <li class="select-type" data-type="2">提现明细</li>
                        </ul>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-space15 scrollbar height-700" id="income-list" style="height: 520px;">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
<script type="text/javascript">
    layui.use(['flow','layer'], function(){
        var layer = layui.layer, flow = layui.flow, $=layui.jquery;
        
        var type = 1;
        $(function(){
            loadList(type);  // 加载列表
        })

        // 根据类型读取
        $(".select-type").on('click', function(){
            type = $(this).data('type');
            $('#income-list').html('');
            loadList(type);
        });

        // 分页加载列表
        function loadList(type){
            var limit = 10;//每次请求的条数
            flow.load({
                elem: '#income-list' //指定列表容器
                ,scrollElem: '#income-list'//滚动条所在元素
                ,end: '—— 已经到底了~ ——'
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页的回调
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        data: {'page': page, 'limit':limit, 'type':type},//请求的页码和每页显示条数
                        url: '/user/income',
                        success: function (res) {
                            var lis = [];
                            if(res.code == 0){
                                if (res.data.length > 0) {
                                    
                                    var newsHtml = '';
                                    layui.each(res.data, function(index, item){
                                        if (type == 1) {
                                            newsHtml = income_log(item, newsHtml);
                                        } else if (type == 2) {
                                            newsHtml = cashout_log(item, newsHtml);
                                        }
                                    });
                                    
                                    lis.push(newsHtml);
                                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                    //res.total为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                    next(lis.join(''), page < Math.ceil(res.count/limit));
                                    
                                } else {
                                    $('#income-list').html('<div class="layui-empty"><img src="/static/images/nodata/no_income.png"><p>暂无相关明细~</p></div>');
                                }
                            } else {
                                layer.msg(res.msg, {icon:2, time: 1500});
                            }
                        }
                        ,error:function(e){
                            layer.closeAll();
                            layer.msg("请求失败："+e.msg, {icon:2, time: 1500});
                        },
                    });
                }
            });
        }

        // 收益明细
        function income_log(item, newsHtml){
            var status_text = '<span class="layui-btn layui-btn-primary layui-btn-xs">待结算</span>';
            if (item.status == 1) {
                status_text = '<span class="layui-btn layui-bg-success layui-btn-xs">已结算</span>'
            } else if (item.status == 2) {
                status_text = '<span class="layui-btn layui-bg-orange layui-btn-xs">已退款</span>'
            }
            newsHtml += `<div class="layui-col-xs12">
                            <div class="layui-panel" style="border: none;border-bottom: 1px solid #f2f2f2;">
                                <div class="space-between">
                                    <div>
                                        <p>${item.remark}</p>
                                        <p style="margin-top: 5px;color: #999;">${item.create_time}</p>
                                    </div>
                                    <div style="text-align: right;">
                                        <p class="layui-font-success">
                                            <b class="layui-font-16">${item.amount}</b>
                                        </p>
                                        ${status_text}
                                    </div>
                                </div>
                            </div>
                        </div>`;
            return  newsHtml;
        }

        // 提现明细
        function cashout_log(item, newsHtml){
            var status_text = '<span class="layui-btn layui-btn-primary layui-btn-xs">待审核</span>';
            if (item.audit_status == 1) {
                status_text = '<span class="layui-btn layui-btn-xs">待打款</span>'
            } else if (item.audit_status == 2) {
                status_text = '<span class="layui-btn layui-bg-red layui-btn-xs">审核失败</span>'
            } else if (item.audit_status == 3) {
                status_text = '<span class="layui-btn layui-bg-success layui-btn-xs">已打款</span>'
            }
            var img_url = '/static/images/alipay.png';
            if (item.cash_type == 3) {
                img_url = '/static/images/weixin.png';
            }
            var audit_reason = '';
            if (item.audit_status == 2) {
                audit_reason = `<span style="color: #ff5722;margin-left: 10px;">驳回：${item.audit_reason}</span>`;
            }
            newsHtml += `<div class="layui-col-xs12">
                            <div class="layui-panel" style="border: none;border-bottom: 1px solid #f2f2f2;">
                                <div class="space-between">
                                    <div>
                                        <p style="display: flex;align-items: center;margin-bottom: 5px;">
                                            <img style="width:22px;margin-right: 5px;border-radius: 50%;" src="${img_url}">
                                            <span>${item.alipay.real_name}，${item.alipay.alipay_no}</span>
                                        </p>
                                        <p style="color: #999;">
                                            ${item.create_time}
                                            ${audit_reason}
                                        </p>
                                    </div>
                                    <div style="text-align: right;">
                                        <p class="layui-font-red">
                                            <b class="layui-font-16">${item.price}</b>
                                        </p>
                                        ${status_text}
                                    </div>
                                </div>
                            </div>
                        </div>`;
            return  newsHtml;
        }

        // 申请提现
        $(document).on('click', '.cash-out', function(){
            layer.confirm('暂不支持PC端申请提现，请你使用APP/微信小程序等手机客户端进行提现申请。', {
                skin: 'layui-layer-radius', // 弹窗主题样式
                title : '提示',
                area: '420px',
                btn: ['知道了', '取消'],
            },function(index){
                layer.close(index);
            })
        })
    });

</script>